import React from 'react'
import StateMixin from 'reflux-state-mixin';
import MenuStore from 'pages/framework/stores/menuStore'
export default React.createClass({
  mixins: [StateMixin.connect(MenuStore)],
  getDefaultProps() {
    return {
      filterStyle: [{
        filterUrl: 'serviceitems',
        icon: 'wodedaiban',
        color: '#f32e2e',
      }, {
        filterUrl: 'servicelist',
        icon: 'wocanyude',
        color: '#b220ef',
      }]
      
    }
  },
  getInitialState() {
    return {
      filterTypes: [
        {
          filterName: "服务项",
          filterUrl: "serviceitems",
          icon: 'woguanzhude'
        },
        {
          filterName: "服务目录",
          filterUrl: "servicelist",
          icon: 'wocanyude'
        },
        {
          filterName: "服务标准",
          filterUrl: "servicestandard",
          icon: 'wocanyude'
        }
      ],
      //configs: configs,
      visible: false,
      isOpen: true,
      id: ""
    }
  },
  render() {

    const { filterTypes } = this.state;
    return (
      <aside id="left-panel" className="layout">
        <div className="panel-wrap">
          <div className="panel">
            <nav id="nav">
              <p className="senior-menu">服务目录</p>
              
              <ul>
                { _.map(filterTypes, (filterType, index) => {
                  return (
                    <li className={ this.state.current.url === filterType.filterUrl ? 'active' : '' }  
                      key={ index }>
                      <a
                        href={this.state.loading ? "javascript:void(0)" : "#/service/" + filterType.filterUrl }>
                        <i className={ "iconfont icon-" + filterType.icon } />
                        <span className="menu-item-parent">{ filterType.filterName }</span>
                      </a>
                    </li>
                  )
                }) }
              </ul>
            </nav>
          </div>
        </div>
      </aside>
    )
  }
});
